<template>
  <div class="app-container">
    <div class="handle-pass">
      <el-button type="primary" icon="el-icon-edit-outline" @click="handlePass">修改密码</el-button>
    </div>
    <el-dialog title="修改密码" :visible.sync="passDialog">
      <el-form :model="passForm" ref="passForm" :rules="passRule">
        <el-form-item label="email" prop="email">
          <el-input v-model="passForm.email" readonly ></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input type="password" v-model="passForm.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="passForm.newPassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passDialog = false">取消</el-button>
        <el-button type="success" @click="changePass">确定</el-button>
      </div>
    </el-dialog>
    <div class="form-container">
      <el-form :model="postForm" ref="postForm" :rules="rules">
        <el-form-item label="ID:">
          <el-input v-model="postForm.userid" readonly></el-input>
        </el-form-item>
        <el-form-item label="Email:">
          <el-input v-model="postForm.email" readonly></el-input>
        </el-form-item>
        <el-form-item label="Title:" prop="title">
          <el-input v-model="postForm.title"></el-input>
        </el-form-item>
        <el-form-item label="Work Place:" prop="workplace">
          <el-input v-model="postForm.workplace"></el-input>
        </el-form-item>
        <el-form-item label="Job Type:" prop="jobtype">
          <el-input v-model="postForm.jobtype"></el-input>
        </el-form-item>
        <el-form-item label="Fisrt Name:" prop="firstname">
          <el-input v-model="postForm.firstname"></el-input>
        </el-form-item>
        <el-form-item label="Last Name:" prop="lastname">
          <el-input v-model="postForm.lastname"></el-input>
        </el-form-item>
        <el-form-item label="Organization:" prop="organization">
          <el-input v-model="postForm.organization"></el-input>
        </el-form-item>
        <el-form-item label="Address:" prop="address">
          <el-input v-model="postForm.address"></el-input>
        </el-form-item>
        <el-form-item label="Zip Code:" prop="zipcode">
          <el-input v-model="postForm.zipcode"></el-input>
        </el-form-item>
        <el-form-item label="City:" prop="city">
          <el-input v-model="postForm.city"></el-input>
        </el-form-item>
        <el-form-item label="Country:" prop="country">
          <el-input v-model="postForm.country"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <el-row>
          <el-button type="success" icon="el-icon-edit" @click="updateForm">Update</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { perfectInfo, changePass } from '@/api/user'
import axios from 'axios'
const id = localStorage.getItem('userid')
// const email = localStorage.getItem('email')
export default {
  name: 'UserData',
  data () {
    return {
      passDialog: false,
      passForm: {
        email: this.$store.state.user.email !== '' ? this.$store.state.user.email : localStorage.getItem('email'),
        oldPassword: '',
        newPassword: ''
      },
      postForm: {
        userid: '',
        email: '',
        title: '',
        workplace: '',
        jobtype: '',
        firstname: '',
        lastname: '',
        organization: '',
        address: '',
        zipcode: '',
        city: '',
        country: ''
      },
      rules: {
        title: [{ required: true, message: '此栏不可为空', trigger: 'change' }],
        workplace: [
          { required: true, message: '此栏不可为空', trigger: 'change' }
        ],
        jobtype: [
          { required: true, message: '此栏不可为空', trigger: 'change' }
        ],
        firstname: [
          { required: true, message: '此栏不可为空', trigger: 'change' }
        ],
        lastname: [
          { required: true, message: '此栏不可为空', trigger: 'change' }
        ],
        organization: [
          { required: true, message: '此栏不可为空', trigger: 'change' }
        ],
        address: [
          { required: true, message: '此栏不可为空', trigger: 'change' }
        ],
        zipcode: [
          { required: true, message: '此栏不可为空', trigger: 'change' }
        ],
        city: [{ required: true, message: '此栏不可为空', trigger: 'change' }],
        country: [
          { required: true, message: '此栏不可为空', trigger: 'change' }
        ]
      },
      passRule: {
        email: [{ required: true, message: '此栏不可为空', trigger: 'change' }],
        oldPassword: [{ required: true, message: '此栏不可为空', trigger: 'change' }],
        newPassword: [{ required: true, message: '此栏不可为空', trigger: 'change' }]
      }
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    handlePass () {
      this.passDialog = true
    },
    changePass () {
      this.$refs['passForm'].validate(valid => {
        if (valid) {
          changePass(this.passForm).then(res => {
            if (res.data.code === 0) {
              this.$message.success('修改密码成功')
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(() => {})
        } else {
          return false
        }
      })
    },
    getUserInfo () {
      console.log(111)
      if (this.$store.state.user.id !== '' || this.$store.state.user.id === null) {
        axios.get(`api/user/getUser/${this.$store.state.user.id}`).then((res) => {
          const data = res.data.data
          this.postForm = data
        }).catch(() => {})
      } else {
        axios.get(`api/user/getUser/${id}`).then((res) => {
          const data = res.data.data
          this.postForm = data
        }).catch(() => {})
      }
    },
    updateForm () {
      this.$refs['postForm'].validate(valid => {
        if (valid) {
          perfectInfo(this.postForm)
            .then(res => {
              console.log(res)
              this.$message.success('update successfully')
            })
            .catch(() => {})
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  // padding: 5px;
  .handle-pass{
    float: right;
    margin-right: 5%;
  }
  .form-container{
    padding: 20px;
    width: 50%;
    margin: 0 auto;
    position: relative;
    .btn-group{
      position: absolute;
      right: 20px;
    }
  }
}

</style>
